import { Component } from 'react'
import { connect } from 'react-redux'
import {Button, View } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'

import './detail.less'
import Topicinfo from "../../../components/topicinfo/topicinfo";
import {admireTopic, getTopicInfo, replyContent} from "../../../actions/topiclist";
import Replies from "../../../components/topicinfo/replies";
import {validateUser} from "../../../actions/user";
import ReplyContent from "../../../components/topicinfo/replycontent";

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  topic: {
    topicinfo: {},
    replies: [],
    admireState: false  //点赞状态
  },
  user: {
    accesstoken: '',
    type: '',
    avatar_url: ""
    id: ""
    loginname: ""
    success: false
  },
}

type PageDispatchProps = {
  getTopicInfo: (object) => void,
}

type PageOwnProps = {}

type PageState = {
  tittle: ''
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface Detail {
  props: IProps;
}

// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-shadow
@connect(({ topic, user }) => ({
  topic, user
}), (dispatch) => ({
  getTopicInfo(params) {
    // @ts-ignore
    dispatch(getTopicInfo(params))
  },
}))
class Detail extends Component {

  state = {
    showReplyContent: false, //显示回复组件
    currentReply: {
      id: '',
      author: {
        loginname: ''
      },
    },
  };

  // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = getCurrentInstance();

  componentDidMount() {
    // @ts-ignore
    this.getDetail();
  }

  getDetail() {
    // @ts-ignore
    const {topicId} = this.$instance.router.params;

    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-shadow
    let { getTopicInfo } = this.props; ///accesstoken: user.accesstoken
    let params = { id: topicId, mdrender: true };
    getTopicInfo && getTopicInfo(params)
  }

  reply() {
    const {user} = this.props;
    validateUser(user).then(result => {
      if (result) {
        this.setState({ showReplyContent: true });
      }
    })
  }

  admire(reply) {
    let { user } = this.props;
    let params = { replyid: reply.id, accesstoken: user.accesstoken };
    admireTopic(params).then(result => {
      if (result.success) {
        this.getDetail();
      }
    })
  }

  // 评论
  replyContentValue(content) {
    // @ts-ignore
    const {topicId} = this.$instance.router.params;
    let { user } = this.props;
    let { currentReply } = this.state;
    let reply_id = currentReply ? currentReply.id : null;
    let preName = currentReply ? '@' + currentReply.author.loginname + '   ' : '';//评论人的昵称
    let params = {
      reply_id: reply_id,
      content: preName + content,
      accesstoken: user.accesstoken,
      topicid: topicId
    };
    replyContent(params).then(result => {
      if (result.success) {
        this.getDetail();
        this.closeReplyContent();
      }
    })
  }

  closeReplyContent() {
    this.setState({ showReplyContent: false });
  }

  render () {
    const { showReplyContent } = this.state;
    const { topic: {topicinfo, replies}, user } = this.props;
    return (
      <View className='detail'>
        {
          showReplyContent ?
            // @ts-ignore
            <ReplyContent
              // @ts-ignore
              onOKReplyContent={(content)=>this.replyContentValue(content)}
              onCancelReplyContent={()=>this.closeReplyContent()}
            />
            :
            <View />
        }
        {
          // @ts-ignore
          <Topicinfo topicinfo={topicinfo} />
        }
        {
          <Replies
            // @ts-ignore
            user={user}
            replies={replies||[]}
            onAdmire={(item)=>this.admire(item)}
          />
        }
        <Button
          className='replyBtn'
          onClick={()=>this.reply()}
        >
          回复
        </Button>
      </View>
    )
  }
}

export default Detail

